<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 </head>
    <ui:composition template="/template/template.xhtml">
    	<ui:define name="busca">
			<h:form>
				<div id="search">
					<h2>
						<h:outputText value="#{msgs.pesquisealbuns}" />
					</h2>
					<h:inputText class="text" value="#{pesquisaBean.album}" id="q" >
						<a4j:support event="onkeyup" action="#{pesquisaBean.pesquisarAlbuns}" reRender="albuns" />
					</h:inputText>
					<h:commandButton value="#{msgs.buscar}" action="#{pesquisaBean.pesquisarAlbuns}" id="submit" class="submit" />
					<br />
				</div>
			</h:form>
		</ui:define>
    	<ui:define name="conteudo"> 
			<h2 class="titulo" >
				<h:outputText value="#{msgs.albuns}" />
			</h2>		
			<rich:dataTable value="#{pesquisaBean.albuns}" style="width: 100%" var="album" id="albuns">
				<rich:column>
					<div class="results">
					<table>
						<tr>
							<td>
								<h:graphicImage url="#{album.imagem}" width="100" height="100" alt="Pic 1" class="left" />
							</td>
							<td>
								<table class="info">
									<tr>
										<th><h:outputText value="#{msgs.album}" /></th><td><h:outputText value="#{album.nome}" /></td>
									</tr>
									<tr>
										<th><h:outputText value="#{msgs.artista}" /></th><td><h:outputText value="#{album.artista.nome}" /></td>
									</tr>
									<tr>
										<th><h:outputText value="#{msgs.ano}" /></th><td><h:outputText value="#{album.ano}" /></td>
									</tr>
								</table>
							</td>
							<td align="right">
								<div class="btns">
									<h:outputLink value="album.jsf?id=#{album.id}">
										<h:outputText value="#{msgs.vermusicas}" />
									</h:outputLink>
								</div>
								<div class="clear"></div>
							</td>
						</tr>
					</table>
					</div>
				</rich:column>
			</rich:dataTable>
		</ui:define>
    </ui:composition>
</html>